// ======================= 定义查询参数 =======================
let layer = layui.layer
let form = layui.form


const query = {
  pagenum: 1, // 是	int	页码值
  pagesize: 2, // 是	int	每页显示多少条数据
  cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
  state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
}

// ======================= 文章列表=======================
getArtList()
function getArtList() {
  axios.get(`/my/article/list`, { params: query }).then(({ data: { status, message, data, total } }) => {
    //  console.log(res);
    let newArr = data.map(item => {
      const { title, cate_name, pub_date, state,Id } = item
      return `
      <tr>
        <td>${title}</td>
        <td>${cate_name}</td>
        <td>${pub_date}</td>
        <td>${state}</td>
        <td>
        <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
        </td>
        </tr>
      `
    }).join(``)
    $(`#list`).html(newArr)
    renderPage(total)
  }) 
}



//===================================获取文章分类的下拉菜单================================

axios.get(`/my/article/cates`).then(({data:{data,status,message}})=>{
  // console.log(res);
  let newArr=data.map(item=>{
    return`
    <option value="${item.Id}">${item.name}</option>
    `
  }).join(``)
  $(`#cateSelect`).append(newArr)
  form.render('select'); //刷新select选择框渲染
})




//===================================实现筛选功能================================

$(`#form`).on(`submit`,function (e) {
  e.preventDefault()
  query.cate_id=$(`#cateSelect`).val()   
  query.state=$(`#stateSelect`).val()

  query.pagenum=1

  getArtList()
})


let laypage=layui.laypage

function renderPage(total) {
  laypage.render({
    elem: 'page-box' ,//注意，这里的 test1 是 ID，不用加 # 号
    count: total, //数据总数，从服务端得到
    limit:query.pagesize,
    curr:query.pagenum,
    limits:[2,3,5,8,10],
    layout:[`count`,`limit`,'prev', 'page', 'next',`skip`],
    jump: function(obj, first){
      //obj包含了当前分页的所有参数，比如：
      //  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数
      query.pagenum=obj.curr
      query.pagesize=obj.limit
      //首次不执行
      if(!first){
        //do something
        getArtList()
      }
    }
  });
 
}

//=================================删除================================
$(`#list`).on(`click`,`.btn_delete`,function () {
  let id=$(this).attr(`data-id`)
  
  layer.confirm('确认删除此文章吗?', {icon: 3, title:'提示'}, function(index){
  
  axios.get(`/my/article/delete/${id}`).then(({data:{status,message}})=>{
    if (status!==0) {
      return layer.msg(message)
    }
    
   //删除功能，有细节bug：当删除最后一页的最后一条数据的时候，当删除成功之后，应该去加载上一页的数据
    if ($(`.btn_delete`).length===1) {
      //如果只有一页的情况
      if (query.pagenum===1) {
        query.pagenum=1
      } else {
      //不止一页，删除完毕后会显示上一页
        query.pagenum=query.pagenum-1
      }
     }

    //删除成功
    layer.msg(message)
    layer.close(index);
    getArtList()
  })
  
});
})


// ===============================编辑功能========================================

$(`#list`).on(`click`,`.btn_edit`,function () {

  let id=$(this).attr(`data-id`)
  
  
  location.href =`/article/art-edit.html?id=${id}`
  
})